// src/components/example/example.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import Example from './example.vue';
import ExampleBadge from './exampleBadge.vue';
import ExampleCard from './exampleCard.vue';

const meta: Meta = {
    title: 'Example/MultiComponent',
    tags: ['autodocs'],
    component: Example,            // 主组件
    subcomponents: {               // 注册子组件
        ExampleBadge,
        ExampleCard,
    },
    argTypes: {
        /* 主组件 Example 的属性 */
        label: { control: 'text', name: 'Button Label' },
        type: { control: 'select', options: ['default', 'primary', 'danger'] },

        /* 子组件 ExampleBadge 的属性 */
        badgeText: { control: 'text', name: 'Badge Text' },
        badgeColor: { control: 'select', options: ['blue', 'green', 'red'] },

        /* 子组件 ExampleCard 的属性 */
        cardTitle: { control: 'text', name: 'Card Title' },
        cardContent: { control: 'text', name: 'Card Content' },
    },
};

export default meta;
type Story = StoryObj<typeof meta>;

/* 多组件故事：把三个组件放在同一条 Story 里 */
export const MultiComponentStory: Story = {
    args: {
        label: '我是Example组件',
        type: 'primary',

        badgeText: '我是ExampleBadge组件',
        badgeColor: 'blue',

        cardTitle: 'Welcome',
        cardContent: '我是ExampleCard组件!',
    },

    render: (args) => ({
        components: { Example, ExampleBadge, ExampleCard },
        setup() {
            return { args };
        },
        template: `
            <div class="box" style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;">
                <Example 
                :label="args.label" 
                :type="args.type" 
                />
                <ExampleBadge 
                :text="args.badgeText" 
                :color="args.badgeColor" 
                />
                <ExampleCard  
                :title="args.cardTitle" 
                :content="args.cardContent" 
                />
            </div>
        `,
    }),
};